<template>
    <section :style="{height: sectionHeight+'px'}">
        <el-row style="padding: 8px;background-color: #e4e7ed;">
            <el-button type="text" class="el-icon-refresh button-color" @click="reloadBtn(isEdit)">
                刷新
            </el-button>
            <el-button type="text" class="el-icon-document-add" :disabled="!(isEdit==0&&nodeActions.includes('add')&&data.approval_state==0)"
                       :class="{'button-color': isEdit==0&&nodeActions.includes('add')&&data.approval_state==0}" @click="addStyleBtn">
                新增
            </el-button>
            <el-button type="text" class="el-icon-copy-document" :disabled="!(isEdit==0&&nodeActions.includes('add')&&data.approval_state==0)"
                       :class="{'button-color': isEdit==0&&nodeActions.includes('add')&&data.approval_state==0}" @click="copyStyleBtn">
                复制
            </el-button>
            <el-button type="text" class="el-icon-edit-outline" :disabled="!(isEdit==0&&nodeActions.includes('edit')&&data.approval_state==0)" @click="reloadBtn(1)"
                       :class="{'button-color': isEdit==0&&nodeActions.includes('edit')&&data.approval_state==0}">
                编辑
            </el-button>
            <el-button :disabled="!(nodeActions.includes('edit')&&isEdit==1&&data.approval_state==0&&['material','color','bom','yy_gs'].includes(tab)&&data.state!=3)"
                       :class="{'button-color':nodeActions.includes('edit')&&isEdit==1&&data.approval_state==0&&['material','color','bom','yy_gs'].includes(tab)&&data.state!=3}"
                       type="text" class="el-icon-s-claim" @click="saveBtn" :loading="saveLoading">
                保存
            </el-button>
            <el-button type="text" class="el-icon-circle-close" :disabled="!(isEdit==1)" @click="reloadBtn(0)" :class="{'button-color': isEdit==1}">
                取消
            </el-button>
            <div class="shuxian-border"></div>
            <el-button type="text" class="el-icon-document-checked" :disabled="!(nodeActions.includes('b1_check')&&isEdit==0&&data.state==0&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b1_check')&&isEdit==0&&data.state==0&&data.approval_state==0}" @click="checkBtn(1, '设计确认')"
                       :loading="checkLoading&&data.state==0&&state==1">
                设计确认
            </el-button>
            <el-button type="text" class="el-icon-refresh-left" :disabled="!(nodeActions.includes('b1_check')&&isEdit==0&&data.state==1&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b1_check')&&isEdit==0&&data.state==1&&data.approval_state==0}" @click="checkBtn(0, '设计撤销')"
                       :loading="checkLoading&&data.state==1&&state==0">
                设计撤销
            </el-button>
            <div class="shuxian-border"></div>
            <el-button type="text" class="el-icon-document-checked" :disabled="!(nodeActions.includes('b2_check')&&isEdit==0&&data.state==1&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b2_check')&&isEdit==0&&data.state==1&&data.approval_state==0}" @click="checkBtn(2, '技术确认')"
                       :loading="checkLoading&&data.state==1&&state==2">
                技术确认
            </el-button>
            <el-button type="text" class="el-icon-refresh-left" :disabled="!(nodeActions.includes('b2_check')&&isEdit==0&&data.state==2&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b2_check')&&isEdit==0&&data.state==2&&data.approval_state==0}" @click="checkBtn(1, '技术撤销')"
                       :loading="checkLoading&&data.state==2&&state==1">
                技术撤销
            </el-button>
            <div class="shuxian-border"></div>
            <el-button type="text" class="el-icon-document-checked" :disabled="!(nodeActions.includes('b3_check')&&isEdit==0&&data.state==2&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b3_check')&&isEdit==0&&data.state==2&&data.approval_state==0}" @click="checkBtn(3, '生产确认')"
                       :loading="checkLoading&&data.state==2&&state==3">
                生产确认
            </el-button>
            <el-button type="text" class="el-icon-refresh-left" :disabled="!(nodeActions.includes('b3_check')&&isEdit==0&&data.state==3&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b3_check')&&isEdit==0&&data.state==3&&data.approval_state==0}" @click="checkBtn(2, '生产撤销')"
                       :loading="checkLoading&&data.state==3&&state==2">
                生产撤销
            </el-button>
            <div class="shuxian-border"></div>
            <el-button type="text" class="el-icon-lock" :disabled="!(nodeActions.includes('b_stop')&&isEdit==0&&data.approval_state==0)"
                       :class="{'button-color': nodeActions.includes('b_stop')&&isEdit==0&&data.approval_state==0}" @click="stopBtn(4)"
                       :loading="btnLoading&&data.approval_state==0">
                停用
            </el-button>
            <el-button type="text" class="el-icon-unlock" :disabled="!(nodeActions.includes('b_stop')&&isEdit==0&&data.approval_state==4)"
                       :class="{'button-color': nodeActions.includes('b_stop')&&isEdit==0&&data.approval_state==4}" @click="stopBtn(0)"
                       :loading="btnLoading&&data.approval_state==4">
                启用
            </el-button>
            <div class="shuxian-border"></div>
            <el-button v-if="split!=0" type="text" class="el-icon-top button-color" @click="topBtn(true)">
                置顶
            </el-button>
            <el-button v-else type="text" class="el-icon-close button-color" @click="topBtn(false)">
                取消置顶
            </el-button>
            <div class="shuxian-border"></div>
            <el-dropdown trigger="click" @command="printBtn">
                <el-button type="text" class="el-icon-printer button-color">
                    打印
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-printer" command="产品确认">产品确认</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-printer" command="设计稿打样">设计稿打样</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-row>
        <Split v-model="split" mode="vertical" :min="0" @on-moving="moveBtn">
            <template #top>
                <el-row class="split-pane" v-show="topShow" v-loading="topLoading">
                    <el-col :span="4">
                        <div @mouseenter="editImg=true" @mouseleave="editImg=false">
                            <!--编辑打开-->
                            <div class="DesignImage-div-box" v-if="editImg&&isEdit&&nodeActions.includes('edit')">
                                <div>
                                    <i style="font-size: 14px;" class="el-icon-edit-outline" @click="openImageBtn">
                                        管理图片
                                    </i>
                                </div>
                            </div>
                            <el-image :src="images" style="width:95%;height: 200px;text-align: center;" fit="contain" :preview-src-list="imagesList">
                                <div slot="error" class="image-slot">
                                    <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="128" height="128"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                </div>
                            </el-image>
                            <div style="width: 100%;margin-top:6px;overflow-x: auto">
                                <el-image v-for="(img, index) in imagesList" :key="index" :src="img" fit="contain"
                                          :class="{'thumb-images-box':true,'actived':index==selectThumbIndex}" @mouseenter="thumbMouseEnterBtn(index)"></el-image>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <el-row v-if="/^新增/.test(typeNo)" style="border-bottom: 1px solid #dcdee2;padding: 8px;">
                            <div style="font-size: 18px;font-weight: bold;display: inline-block;">
                                <span style="margin-right: 8px;">款号:</span>
                                <el-input v-model.trim="data.number" size="mini" style="width: 250px;margin-right: 4px;" placeholder="命名规则：3位大写字母 + 6位数字" clearable></el-input>
                                <el-button type="primary" size="mini" plain @click="dbCheck">查重</el-button>
                            </div>
                        </el-row>
                        <el-row v-else style="border-bottom: 1px solid #dcdee2;padding: 8px;">
                            <div style="font-size: 18px;font-weight: bold;display: inline-block;">
                                <span style="margin-right: 8px;">款号:</span>
                                <el-badge v-for="item in states" :key="item.value" :value="item.label" :type="item.type" v-if="item.value==data.state">
                                    <i class="el-icon-document-copy type-no-tag" @click="copyBtn(data.number)" style="cursor: pointer;color: #909399"></i>
                                    {{data.number}}
                                </el-badge>
                            </div>
                            <div style="font-size: 14px;display: inline-block;margin-left: 6%;color: #909399">
                                <span style="margin-right: 8px">创建人:</span>
                                <span>{{data.creator}}</span>
                            </div>
                            <div style="font-size: 14px;display: inline-block;margin-left: 6%;color: #909399">
                                <span style="margin-right: 8px">创建时间:</span>
                                <span>{{data.creation_time}}</span>
                            </div>
                        </el-row>
                        <el-row style="padding-top: 8px;display: flex;flex-wrap: wrap;">
                            <el-col class="content-box">
                                <el-col class="content-box-title">款名：</el-col>
                                <el-col class="content-box-value">
                                    <el-input v-model.trim="data.name" size="mini" :disabled="!isEdit" clearable></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">简称：</el-col>
                                <el-col class="content-box-value">
                                    <el-input v-model.trim="data.short_name" size="mini" :disabled="!isEdit" clearable></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">品类：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.product_category" placeholder="选择品类" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!(isEdit&&!data.id)" clearable @change="selectChangeBtn($event, 'product_category_id')">
                                        <el-option v-for="(item, index) in classList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">设计分类：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.detail_category" placeholder="选择设计分类" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'detail_category_id')">
                                        <el-option v-for="(item, index) in categoryList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">设计类型：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.type_id" placeholder="选择设计类型" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable>
                                        <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">上新月份：</el-col>
                                <el-col class="content-box-value">
                                    <el-date-picker v-model="data.year_month" type="month" value-format="yyyy-MM" placeholder="上新月份" size="mini" clearable
                                                    :disabled="!isEdit" @change="monthChangeBtn">
                                    </el-date-picker>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">品牌：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.brand" placeholder="选择品牌" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'brand_id')">
                                        <el-option v-for="(item, index) in brandList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">季节：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.season" placeholder="选择季节" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'season_id')">
                                        <el-option v-for="(item, index) in seasonList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">目标群体：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.target" placeholder="选择目标群体" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'target_id')">
                                        <el-option v-for="(item, index) in targetList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">文化属性：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.t1" placeholder="选择文化属性" size="mini" :loading="searchLoading" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 't1_id')">
                                        <el-option v-for="(item, index) in cultureList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">套装编号：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.package_number" filterable placeholder="输入搜索套装名称" size="mini" :loading="searchLoading"
                                               :disabled="!isEdit" :remote-method="getSuitList" remote clearable @change="selectChangeBtn($event, 't17_id')">
                                        <el-option v-for="(item, index) in suitList" :key="index" :label="item.number" :value="item.number">
                                            <span style="float: left;margin-right: 10px;">{{ item.number }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 11px">{{ item.name }}</span>
                                        </el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title" style="color: unset;">工艺类型：</el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.t68" size="mini" class="select-box"
                                               :disabled="!isEdit" clearable @change="selectChangeBtn($event, 't68_id')">
                                        <el-option v-for="(item, index) in artsList" :key="index" :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row style="padding: 8px 0px;display: flex;flex-wrap: wrap;border-bottom: 1px solid #dcdee2">
                            <el-col class="content-box">
                                <el-col class="content-box-title">
                                    <svg t="1750398043313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="14" height="14"><path d="M702.64 859.552l127.52-130.32c5.824 7.584 10.672 13.92 15.392 18.048h-0.016c22.48 19.264 28.192 112.704 27.808 112.352l-170.72-0.08z m-170.272-0.08L112 859.28s-0.768-93.088 21.344-112.32c22.096-19.28 44.576-87.168 162.72-102.912 116.224-15.408 83.84-70.016 86.496-70.016-0.368-15.04-0.768-17.12-0.768-17.12v0.32s-47.232-24.48-65.168-71.04c-37.712-14-32.768-22.752-36.576-40.608 0 0-11.424-70.688 13.344-70.688h0.768s14.48 0 10.288-16.448c-1.52-27.296-0.768-79.104 1.136-97.664 2.288-18.528 17.152-68.24 60.224-75.584 15.232-2.8 22.848-3.504 27.04-3.504 6.096 0 4.576 1.76 8.768 1.76 1.136 0 2.288 0 4.192-0.352 14.096-1.76 9.92-12.608 36.592-12.608L515.184 160c26.288 0 61.344 33.248 75.808 35.696 2.672 0.352 4.96 0.352 6.88 0.352 5.312 0 9.888-0.704 17.12-0.704 7.808 0.048 15.584 0.752 23.264 2.096 43.056 7.36 40 59.84 41.92 78.4 1.904 18.56 3.424 70.352-0.768 86.8-3.056 11.552 2.288 13.296 5.712 13.296 1.52 0 2.672-0.32 2.672-0.32h0.368c26.688 0 18.304 72.432 18.304 72.432-4.576 18.544-15.248 21.008-43.84 37.088-18.288 46.56-58.288 75.264-58.288 75.264s-1.152 2.08-1.536 10.496c0.768 3.136-36.192 58.448 78.512 73.488l2.88 0.4-129.072 131.952-0.128 0.128-0.064 0.208a3.904 3.904 0 0 1-0.464 1.152l-0.256 0.4a2.56 2.56 0 0 0-0.48 0.736l-21.36 80.112z m83.2-110.48l0.08-0.096 234.768-242c6.624-6.752 15.68-10.48 25.504-10.48 11.248 0 22.496 4.896 30.88 13.536l22.256 22.944c8.32 8.528 13.12 20.064 13.12 31.664 0 10.176-3.616 19.536-10.16 26.288L696.8 833.232a1.52 1.52 0 0 1-0.848 0.48l-0.192 0.064-0.144-0.064-89.04 24.736a13.248 13.248 0 0 1-12.656-3.344 13.856 13.856 0 0 1-3.392-13.088l24.144-91.232a1.856 1.856 0 0 1 0.32-0.528l0.192-0.288a2.816 2.816 0 0 0 0.336-0.832l0.048-0.144zM888.48 528.864c-5.088-5.104-13.376-5.584-17.792-1.072l-24.432 25.12 40.72 42.624 24.848-25.552a11.856 11.856 0 0 0 3.152-8.048 14.72 14.72 0 0 0-4.24-10.144l-22.256-22.928zM652.48 752.672l41.056 42.288 172.352-177.552-40.768-42.672-172.64 177.936z m-30.96 73.872l51.632-14.56-37.6-38.8-14.032 53.36z" fill="#1296db" p-id="3061"></path></svg>
                                    图稿设计：
                                </el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.f3" filterable remote size="mini" :loading="searchLoading"
                                               :remote-method="searchUserBtn" :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'f3_id')">
                                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title">
                                    <svg t="1750398043313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="14" height="14"><path d="M702.64 859.552l127.52-130.32c5.824 7.584 10.672 13.92 15.392 18.048h-0.016c22.48 19.264 28.192 112.704 27.808 112.352l-170.72-0.08z m-170.272-0.08L112 859.28s-0.768-93.088 21.344-112.32c22.096-19.28 44.576-87.168 162.72-102.912 116.224-15.408 83.84-70.016 86.496-70.016-0.368-15.04-0.768-17.12-0.768-17.12v0.32s-47.232-24.48-65.168-71.04c-37.712-14-32.768-22.752-36.576-40.608 0 0-11.424-70.688 13.344-70.688h0.768s14.48 0 10.288-16.448c-1.52-27.296-0.768-79.104 1.136-97.664 2.288-18.528 17.152-68.24 60.224-75.584 15.232-2.8 22.848-3.504 27.04-3.504 6.096 0 4.576 1.76 8.768 1.76 1.136 0 2.288 0 4.192-0.352 14.096-1.76 9.92-12.608 36.592-12.608L515.184 160c26.288 0 61.344 33.248 75.808 35.696 2.672 0.352 4.96 0.352 6.88 0.352 5.312 0 9.888-0.704 17.12-0.704 7.808 0.048 15.584 0.752 23.264 2.096 43.056 7.36 40 59.84 41.92 78.4 1.904 18.56 3.424 70.352-0.768 86.8-3.056 11.552 2.288 13.296 5.712 13.296 1.52 0 2.672-0.32 2.672-0.32h0.368c26.688 0 18.304 72.432 18.304 72.432-4.576 18.544-15.248 21.008-43.84 37.088-18.288 46.56-58.288 75.264-58.288 75.264s-1.152 2.08-1.536 10.496c0.768 3.136-36.192 58.448 78.512 73.488l2.88 0.4-129.072 131.952-0.128 0.128-0.064 0.208a3.904 3.904 0 0 1-0.464 1.152l-0.256 0.4a2.56 2.56 0 0 0-0.48 0.736l-21.36 80.112z m83.2-110.48l0.08-0.096 234.768-242c6.624-6.752 15.68-10.48 25.504-10.48 11.248 0 22.496 4.896 30.88 13.536l22.256 22.944c8.32 8.528 13.12 20.064 13.12 31.664 0 10.176-3.616 19.536-10.16 26.288L696.8 833.232a1.52 1.52 0 0 1-0.848 0.48l-0.192 0.064-0.144-0.064-89.04 24.736a13.248 13.248 0 0 1-12.656-3.344 13.856 13.856 0 0 1-3.392-13.088l24.144-91.232a1.856 1.856 0 0 1 0.32-0.528l0.192-0.288a2.816 2.816 0 0 0 0.336-0.832l0.048-0.144zM888.48 528.864c-5.088-5.104-13.376-5.584-17.792-1.072l-24.432 25.12 40.72 42.624 24.848-25.552a11.856 11.856 0 0 0 3.152-8.048 14.72 14.72 0 0 0-4.24-10.144l-22.256-22.928zM652.48 752.672l41.056 42.288 172.352-177.552-40.768-42.672-172.64 177.936z m-30.96 73.872l51.632-14.56-37.6-38.8-14.032 53.36z" fill="#1296db" p-id="3061"></path></svg>
                                    产品负责：
                                </el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.designer" filterable remote size="mini" :loading="searchLoading"
                                               :remote-method="searchUserBtn" :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'designer_id')">
                                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title" style="color: unset;">
                                    <svg t="1750398043313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="14" height="14"><path d="M702.64 859.552l127.52-130.32c5.824 7.584 10.672 13.92 15.392 18.048h-0.016c22.48 19.264 28.192 112.704 27.808 112.352l-170.72-0.08z m-170.272-0.08L112 859.28s-0.768-93.088 21.344-112.32c22.096-19.28 44.576-87.168 162.72-102.912 116.224-15.408 83.84-70.016 86.496-70.016-0.368-15.04-0.768-17.12-0.768-17.12v0.32s-47.232-24.48-65.168-71.04c-37.712-14-32.768-22.752-36.576-40.608 0 0-11.424-70.688 13.344-70.688h0.768s14.48 0 10.288-16.448c-1.52-27.296-0.768-79.104 1.136-97.664 2.288-18.528 17.152-68.24 60.224-75.584 15.232-2.8 22.848-3.504 27.04-3.504 6.096 0 4.576 1.76 8.768 1.76 1.136 0 2.288 0 4.192-0.352 14.096-1.76 9.92-12.608 36.592-12.608L515.184 160c26.288 0 61.344 33.248 75.808 35.696 2.672 0.352 4.96 0.352 6.88 0.352 5.312 0 9.888-0.704 17.12-0.704 7.808 0.048 15.584 0.752 23.264 2.096 43.056 7.36 40 59.84 41.92 78.4 1.904 18.56 3.424 70.352-0.768 86.8-3.056 11.552 2.288 13.296 5.712 13.296 1.52 0 2.672-0.32 2.672-0.32h0.368c26.688 0 18.304 72.432 18.304 72.432-4.576 18.544-15.248 21.008-43.84 37.088-18.288 46.56-58.288 75.264-58.288 75.264s-1.152 2.08-1.536 10.496c0.768 3.136-36.192 58.448 78.512 73.488l2.88 0.4-129.072 131.952-0.128 0.128-0.064 0.208a3.904 3.904 0 0 1-0.464 1.152l-0.256 0.4a2.56 2.56 0 0 0-0.48 0.736l-21.36 80.112z m83.2-110.48l0.08-0.096 234.768-242c6.624-6.752 15.68-10.48 25.504-10.48 11.248 0 22.496 4.896 30.88 13.536l22.256 22.944c8.32 8.528 13.12 20.064 13.12 31.664 0 10.176-3.616 19.536-10.16 26.288L696.8 833.232a1.52 1.52 0 0 1-0.848 0.48l-0.192 0.064-0.144-0.064-89.04 24.736a13.248 13.248 0 0 1-12.656-3.344 13.856 13.856 0 0 1-3.392-13.088l24.144-91.232a1.856 1.856 0 0 1 0.32-0.528l0.192-0.288a2.816 2.816 0 0 0 0.336-0.832l0.048-0.144zM888.48 528.864c-5.088-5.104-13.376-5.584-17.792-1.072l-24.432 25.12 40.72 42.624 24.848-25.552a11.856 11.856 0 0 0 3.152-8.048 14.72 14.72 0 0 0-4.24-10.144l-22.256-22.928zM652.48 752.672l41.056 42.288 172.352-177.552-40.768-42.672-172.64 177.936z m-30.96 73.872l51.632-14.56-37.6-38.8-14.032 53.36z" fill="#1296db" p-id="3061"></path></svg>
                                    绣花版师：
                                </el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.embroider_designer" filterable remote size="mini" :loading="searchLoading"
                                               :remote-method="searchUserBtn" :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'embroider_designer_id')">
                                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title" style="color: unset;">
                                    <svg t="1750398043313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="14" height="14"><path d="M702.64 859.552l127.52-130.32c5.824 7.584 10.672 13.92 15.392 18.048h-0.016c22.48 19.264 28.192 112.704 27.808 112.352l-170.72-0.08z m-170.272-0.08L112 859.28s-0.768-93.088 21.344-112.32c22.096-19.28 44.576-87.168 162.72-102.912 116.224-15.408 83.84-70.016 86.496-70.016-0.368-15.04-0.768-17.12-0.768-17.12v0.32s-47.232-24.48-65.168-71.04c-37.712-14-32.768-22.752-36.576-40.608 0 0-11.424-70.688 13.344-70.688h0.768s14.48 0 10.288-16.448c-1.52-27.296-0.768-79.104 1.136-97.664 2.288-18.528 17.152-68.24 60.224-75.584 15.232-2.8 22.848-3.504 27.04-3.504 6.096 0 4.576 1.76 8.768 1.76 1.136 0 2.288 0 4.192-0.352 14.096-1.76 9.92-12.608 36.592-12.608L515.184 160c26.288 0 61.344 33.248 75.808 35.696 2.672 0.352 4.96 0.352 6.88 0.352 5.312 0 9.888-0.704 17.12-0.704 7.808 0.048 15.584 0.752 23.264 2.096 43.056 7.36 40 59.84 41.92 78.4 1.904 18.56 3.424 70.352-0.768 86.8-3.056 11.552 2.288 13.296 5.712 13.296 1.52 0 2.672-0.32 2.672-0.32h0.368c26.688 0 18.304 72.432 18.304 72.432-4.576 18.544-15.248 21.008-43.84 37.088-18.288 46.56-58.288 75.264-58.288 75.264s-1.152 2.08-1.536 10.496c0.768 3.136-36.192 58.448 78.512 73.488l2.88 0.4-129.072 131.952-0.128 0.128-0.064 0.208a3.904 3.904 0 0 1-0.464 1.152l-0.256 0.4a2.56 2.56 0 0 0-0.48 0.736l-21.36 80.112z m83.2-110.48l0.08-0.096 234.768-242c6.624-6.752 15.68-10.48 25.504-10.48 11.248 0 22.496 4.896 30.88 13.536l22.256 22.944c8.32 8.528 13.12 20.064 13.12 31.664 0 10.176-3.616 19.536-10.16 26.288L696.8 833.232a1.52 1.52 0 0 1-0.848 0.48l-0.192 0.064-0.144-0.064-89.04 24.736a13.248 13.248 0 0 1-12.656-3.344 13.856 13.856 0 0 1-3.392-13.088l24.144-91.232a1.856 1.856 0 0 1 0.32-0.528l0.192-0.288a2.816 2.816 0 0 0 0.336-0.832l0.048-0.144zM888.48 528.864c-5.088-5.104-13.376-5.584-17.792-1.072l-24.432 25.12 40.72 42.624 24.848-25.552a11.856 11.856 0 0 0 3.152-8.048 14.72 14.72 0 0 0-4.24-10.144l-22.256-22.928zM652.48 752.672l41.056 42.288 172.352-177.552-40.768-42.672-172.64 177.936z m-30.96 73.872l51.632-14.56-37.6-38.8-14.032 53.36z" fill="#1296db" p-id="3061"></path></svg>
                                    版师：
                                </el-col>
                                <el-col class="content-box-value">
                                    <el-select v-model="data.paper_designer" filterable remote size="mini" :loading="searchLoading"
                                               :remote-method="searchUserBtn" :disabled="!isEdit" clearable @change="selectChangeBtn($event, 'paper_designer_id')">
                                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box">
                                <el-col class="content-box-title" style="color: unset;">绣花总针数：</el-col>
                                <el-col class="content-box-value">
                                    <span>{{data.embroidery_stitches_number}}</span>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row style="padding-top: 8px;display: flex;flex-wrap: wrap;">
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">产品描述：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-input v-model.trim="data.f7" size="mini" :disabled="!isEdit" suffix-icon="el-icon-edit"></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">成分：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-input v-model.trim="data.composition" size="mini" :disabled="!isEdit" suffix-icon="el-icon-edit"></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">上新成分：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-input v-model.trim="data.f79" size="mini" :disabled="!isEdit" suffix-icon="el-icon-edit"></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">工艺细节：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-input v-model.trim="data.comment" size="mini" :disabled="!isEdit" suffix-icon="el-icon-edit"></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">生产备注：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-input v-model.trim="data.f36" size="mini" :disabled="!isEdit" suffix-icon="el-icon-edit"></el-input>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 486px;">
                                <el-col class="content-box-title" style="color: unset;">商品属性：</el-col>
                                <el-col class="content-box-value" style="width: 406px;">
                                    <el-select v-model="data.style_t4" multiple placeholder="请选择" size="mini" value-key="id" style="width: 100%" :disabled="!isEdit">
                                        <el-option v-for="(item,index) in goodsList" :key="item.id" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                </el-col>
                            </el-col>
                            <el-col class="content-box" style="width: 900px;">
                                <el-col class="content-box-title" style="color: unset;">纹样描述：</el-col>
                                <el-col class="content-box-value" style="width: 90%">
                                    <template v-if="isEdit">
                                        <el-tag v-for="(item, index) in data.style_tag" :key="index" type="warning"
                                                style="margin-right: 2px;"
                                                closable
                                                :disable-transitions="false"
                                                @close="closeStyleTagBtn(index)">
                                            {{item.value}}
                                        </el-tag>
                                        <el-input style="width: 90px;vertical-align: bottom;"
                                                  v-if="styleTagVisible"
                                                  v-model="styleTagValue"
                                                  ref="styleTagInput"
                                                  size="small"
                                                  @keyup.enter.native="styleTagConfirm"
                                                  @blur="styleTagConfirm">
                                        </el-input>
                                        <el-button v-else size="small" @click="showStyleTagInput">+ 添加</el-button>
                                    </template>
                                    <template v-else-if="data.style_tag && data.style_tag.length>0">
                                        <el-tag v-for="(item, index) in data.style_tag" :key="index" type="warning" style="margin-right: 2px;">
                                            {{item.value}}
                                        </el-tag>
                                    </template>
                                    <template v-else>
                                        <el-input size="mini" style="width: 406px" disabled></el-input>
                                    </template>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </template>
            <template #bottom>
                <el-row class="split-pane" style="padding:0;margin-top: 6px;overflow: hidden;" v-loading="bottomLoading">
                    <el-tabs v-model="tab">
                        <el-tab-pane label="物料清单" name="material" v-if="nodeActions.includes('d_material')">
                            <design-material-ed v-if="isEdit==1&&nodeActions.includes('edit')&&data.state<3" ref="material" :detail="data" :material-data="materialData"
                                                :attribute-map="attributeMap" :style-colour="styleColour" :height="tabHeight" @push-data="pushBomDataHandle"></design-material-ed>
                            <design-material v-else ref="material" :detail="data" :material-data="materialData" :style-colour="styleColour" :height="tabHeight"
                                             :is-edit="isEdit"></design-material>
                        </el-tab-pane>
                        <el-tab-pane label="颜色" name="color" v-if="nodeActions.includes('d_color')">
                            <design-color-ed ref="color" v-if="isEdit==1&&nodeActions.includes('edit')&&data.state<1" :style-colour="styleColour" :height="tabHeight"></design-color-ed>
                            <design-color ref="color" v-else :style-colour="styleColour" :height="tabHeight"></design-color>
                        </el-tab-pane>
                        <el-tab-pane label="尺码" name="size" v-if="nodeActions.includes('d_size')">
                            <design-size ref="size" :size-data="sizeData" :height="tabHeight" :is-edit="isEdit"></design-size>
                        </el-tab-pane>
                        <el-tab-pane label="尺寸表" name="rule" v-if="nodeActions.includes('d_rule')">
                            <design-rule-ed ref="rule" v-if="isEdit==1&&nodeActions.includes('edit')" :height="tabHeight" :type-no="typeNo" :rule-data="ruleData" :rule-log="ruleLog"
                                @import-data="importData"></design-rule-ed>
                            <design-rule ref="rule" v-else :height="tabHeight" :rule-data="ruleData" :rule-log="ruleLog"></design-rule>
                        </el-tab-pane>
                        <el-tab-pane label="大货BOM" name="bom" v-if="nodeActions.includes('d_bom')">
                            <design-bom-ed v-if="isEdit==1&&nodeActions.includes('edit')&&data.state<3" ref="bom" :detail="data" :bom-data="bomData" :attribute-map="attributeMap"
                                                :style-colour="styleColour" :height="tabHeight"></design-bom-ed>
                            <design-bom v-else ref="bom" :detail="data" :style-colour="styleColour" :bom-data="bomData" :height="tabHeight"></design-bom>
                        </el-tab-pane>
                        <el-tab-pane label="绣花BOM" name="bom_xh" v-if="nodeActions.includes('d_bom_xh')">
                            <design-bom-xh-ed v-if="isEdit==1&&nodeActions.includes('edit')&&data.state<3&&data.id" ref="bom_xh" :bom-x-h-data="bomXHData" :detail="data"
                                              :height="tabHeight"></design-bom-xh-ed>
                            <design-bom-xh v-else ref="bom_xh" :bom-x-h-data="bomXHData" :height="tabHeight"></design-bom-xh>
                        </el-tab-pane>
                        <el-tab-pane label="样衣工时" name="yy_gs" v-if="nodeActions.includes('d_yy_gs')">
                            <design-yy-ed v-if="isEdit==1&&nodeActions.includes('edit')&&data.state<3" ref="yy_gs" :yy-data="yyData" :height="tabHeight"></design-yy-ed>
                            <design-yy v-else ref="yy_gs" :yy-data="yyData" :height="tabHeight"></design-yy>
                        </el-tab-pane>
                        <el-tab-pane label="工艺单" name="gy" v-if="nodeActions.includes('d_gy')">
                            <design-gy-ed ref="gy" v-if="isEdit==1&&nodeActions.includes('edit')" :rule-data="ruleData" :gy-data="gyData" :height="tabHeight"
                                :standard-data="standardData" :safety-data="safetyData" @import-data="importData"></design-gy-ed>
                            <design-gy ref="gy" v-else :rule-data="ruleData" :gy-data="gyData" :height="tabHeight"></design-gy>
                        </el-tab-pane>
                        <el-tab-pane label="水洗方式" name="wash" v-if="nodeActions.includes('d_wash')">
                            <design-wash ref="wash" :wash-data="washData" :height="tabHeight" :is-edit="isEdit"></design-wash>
                        </el-tab-pane>
                        <el-tab-pane label="相关资料" name="file" v-if="nodeActions.includes('d_file')">
                            <design-file-ed v-if="isEdit==1&&nodeActions.includes('edit')" ref="file" :rule-data="ruleData" :file-data="fileData" :style-colour="styleColour"
                                            :height="tabHeight" @getData="detailFile"></design-file-ed>
                            <design-file v-else ref="file" :rule-data="ruleData" :file-data="fileData" :style-colour="styleColour" :height="tabHeight" @getData="detailFile">
                            </design-file>
                        </el-tab-pane>
                        <el-tab-pane label="附件" name="attach" v-if="nodeActions.includes('d_attach')">
                            <design-attach-ed v-if="isEdit==1&&nodeActions.includes('edit')" :detail="data" :attach-data="attachData" :height="tabHeight"
                                @getData="detailAttach"></design-attach-ed>
                            <design-attach v-else :attach-data="attachData" :height="tabHeight"></design-attach>
                        </el-tab-pane>
                        <el-tab-pane label="日志" name="logs" v-if="nodeActions.includes('d_logs')">
                            <design-log :type_no="typeNo" :style_id="data.id" :height="tabHeight" :is-edit="isEdit"></design-log>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            </template>
        </Split>

        <!--打印-->
        <el-drawer :visible.sync="printVisible" :with-header="false" size="1200px" direction="rtl" :wrapperClosable="false"
                   :close-on-press-escape="false">
            <print-check v-if="printData.type=='产品确认'" :printData="printData" @close-btn="printVisible=false;printData={}"></print-check>
            <print-design v-if="printData.type=='设计稿打样'" :printData="printData" @close-btn="printVisible=false;printData={}"></print-design>
        </el-drawer>

        <!--款式图片管理-->
        <el-dialog title="款式图片管理" :visible.sync="imageVisible" top="10px" :close-on-click-modal="false" width="900px" :before-close="closeImageBtn">
            <el-row>
                <el-upload action="/api/tool/fileImport" list-type="picture-card" class="design-upload" drag
                           :headers="uploadHeaders"
                           :data="uploadData"
                           :file-list="uploadImages"
                           :on-success="(res, file, fileList)=>uploadSuccessHandle(res, fileList)"
                           :before-upload="beforeUploadHandle">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <div style="width: 146px;height: 146px;">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        </div>
                        <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" @click="delImgBtn(file)">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </div>
                </el-upload>
            </el-row>
            <div slot="footer">
                <el-button @click="closeImageBtn" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveImageBtn" size="small" :loading="saveLoading" :disabled="uploadImages.length==0">确 定</el-button>
            </div>
        </el-dialog>

        <!--图片预览-->
        <el-dialog :visible.sync="previewVisible" width="600px">
            <img width="100%" height="100%" style="object-fit: contain" :src="previewUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>
import DesignMaterial from "@/view/pages/components/designMaterial";
import DesignMaterialEd from "@/view/pages/components/designMaterialEd";
import DesignColor from "@/view/pages/components/designColor";
import DesignSize from "@/view/pages/components/designSize";
import DesignRule from "@/view/pages/components/designRule";
import DesignRuleEd from "@/view/pages/components/designRuleEd";
import DesignBom from "@/view/pages/components/designBom";
import DesignBomXh from "@/view/pages/components/designBomXh";
import DesignBomXhEd from "@/view/pages/components/designBomXhEd";
import DesignYy from "@/view/pages/components/designYy";
import DesignNew from "@/view/pages/components/designNew";
import DesignGy from "@/view/pages/components/designGy";
import DesignWash from "@/view/pages/components/designWash";
import DesignFile from "@/view/pages/components/designFile";
import DesignLog from "@/view/pages/components/designLog";
import DesignAttach from "@/view/pages/components/designAttach";
import DesignAttachEd from "@/view/pages/components/designAttachEd";
import DesignGyEd from "@/view/pages/components/designGyEd";
import {copyText} from "../../libs/tools";
import printCheck from "./components/printCheck";
import PrintDesign from "./components/printDesign";
import {
    artsList,
    attribute,
    brandList,
    categoryList,
    classList,
    cultureList,
    goodsList,
    seasonList,
    suitList,
    targetList,
    typeList
} from "../../api/bs/info";
import {
    designDetail,
    designDetailRule,
    designDetailGy,
    designDetailAttach,
    designDetailFile,
    designStop, designCheck, designImageSave, designSave, designDBCheck
} from "../../api/bs/design";
import {userList} from "../../api/user";
import {getToken, localRead} from "../../libs/util";
import DesignColorEd from "./components/designColorEd";
import DesignFileEd from "./components/designFileEd";
import DesignBomEd from "./components/designBomEd";
import DesignYyEd from "./components/designYyEd";
import { mapMutations } from 'vuex'
import {safetyList} from "../../api/produce/safety";

export default {
    components:{
        DesignFileEd,
        DesignColorEd,
        DesignGyEd,
        DesignAttach,
        DesignAttachEd,
        DesignLog,
        DesignFile,
        DesignWash,
        DesignRuleEd,
        DesignRule,
        DesignMaterial,
        DesignMaterialEd,
        DesignColor,
        DesignSize,
        DesignBom,
        DesignBomEd,
        DesignBomXh,
        DesignBomXhEd,
        DesignYy,
        DesignYyEd,
        DesignNew,
        DesignGy,
        printCheck,
        PrintDesign,
    },
    data () {
        return {
            user: {},
            nodeActions: [],
            sectionHeight: window.innerHeight - 160,
            split: 0.32,
            typeNo: "",
            copyTypeNo: "",
            isEdit: 0,
            editImg: false,
            topShow: true,
            btnLoading: false,
            saveLoading: false,
            checkLoading: false,
            topLoading: false,
            bottomLoading: false,

            states: [
                {label: "未确认", value: 0, type: "info"},
                {label: "设计确认", value: 1, type: "primary"},
                {label: "技术确认", value: 2, type: "warning"},
                {label: "生产确认", value: 3, type: "success"}
            ],
            data: {style_t4: []},
            imageVisible: false,
            images: "",
            imagesList: [],
            selectThumbIndex: 0,

            uploadImages: [],
            uploadHeaders: {},
            uploadData:{type: 'design_style', disk: 'style'},

            tab: "material",
            tabHeight: (window.innerHeight - 240)*0.68,
            styleColour: [],
            materialData: [],
            sizeData: [],
            ruleData: {},
            ruleLog: [],
            bomData: [],
            bomXHData: [],
            yyData: [],
            gyData: {},
            washData: [],
            fileData: [],
            attachData: [],

            previewVisible: false,
            previewUrl: "",
            printVisible: false,
            printData: {},

            searchLoading: false,
            userList: [],
            suitList: [],
            goodsList: [],
            artsList: [],
            cultureList: [],
            targetList: [],
            seasonList:[],
            brandList: [],
            typeList: [],
            classList: [],
            categoryList: [],
            attributeMap: {},
            styleTagVisible: false,
            styleTagValue: "",
            state: 0,//设计档案确认流程步骤

            standardData: [],//执行标准
            safetyData: [],//安全类别
        }
    },
    watch:{
        // 监听路由参数的变化
        '$route.params': {
            immediate: true,
            handler(params) {
                this.typeNo = params.id;
                this.isEdit = parseInt(params.isEdit);
                console.log("watch", params)
                this.reloadBtn(this.isEdit);
            }
        },
        tab(value){
            switch (value){
                case "rule":
                    if(this.isEdit == 1 && this.nodeActions.includes('edit')){
                        if(!this.ruleData.id){
                            this.$confirm('上新表数据没有同步，无法编辑该款尺寸', '提示', {
                                showCancelButton:false,
                                showConfirmButton: false,
                                closeOnClickModal: false,
                                type: 'warning'
                            }).then(() => {

                            }).catch(() => {

                            });
                        }
                        if(this.ruleData.size_code_status && this.ruleData.size_code_status == 1){
                            this.$confirm('尺寸表: 锁定状态, 不可以编辑', '提示', {
                                showCancelButton:false,
                                showConfirmButton: false,
                                closeOnClickModal: false,
                                type: 'warning'
                            }).then(() => {

                            }).catch(() => {

                            });
                        }
                    }
                    break;
                case "gy":
                    if(this.isEdit == 1){
                        if(!this.ruleData.id){
                            this.$confirm('上新表数据没有同步，无法编辑该款工艺', '提示', {
                                showCancelButton:false,
                                showConfirmButton: false,
                                closeOnClickModal: false,
                                type: 'warning'
                            }).then(() => {

                            }).catch(() => {

                            });
                        }
                        if(this.ruleData.process_sheet_status && this.ruleData.process_sheet_status == 1){
                            this.$confirm('工艺单: 锁定状态, 不可以编辑', '提示', {
                                showCancelButton:false,
                                showConfirmButton: false,
                                closeOnClickModal: false,
                                type: 'warning'
                            }).then(() => {

                            }).catch(() => {

                            });
                        }
                    }
                    break;
            }
        },
    },
    methods:{
        ...mapMutations([
            'setTagNavList',
        ]),
        //重载路由
        reloadRoute(){
            let tagNaveList = [];
            JSON.parse(localRead("tagNaveList")).forEach(item => {
                if(!(item.name == 'pages_designEd' && item.params.id == this.typeNo && item.params.isEdit==1)){
                    tagNaveList.push(item);
                }
            });
            this.isEdit = 0;
            if(this.$route.params.isEdit == 1){
                this.typeNo = /^新增/.test(this.typeNo) ? this.data.number : this.typeNo;
                this.$router.push({
                    name: 'pages_designEd',
                    params: { id: this.typeNo, isEdit: 0}
                });
                this.setTagNavList(tagNaveList);
            }
        },
        selectChangeBtn(value, column){
            let id = "";
            switch (column){
                case "f3_id":
                case "designer_id":
                case "embroider_designer_id":
                case "paper_designer_id":
                    this.userList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "t68_id":
                    this.artsList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "t17_id":
                    this.suitList.forEach(item => {
                        if(item.number == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "t1_id":
                    this.cultureList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "target_id":
                    this.targetList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "season_id":
                    this.seasonList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "brand_id":
                    this.brandList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
                case "product_category_id":
                    this.classList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    this.getCategoryList();
                    break;
                case "detail_category_id":
                    this.categoryList.forEach(item => {
                        if(item.name == value){
                            id = item.id;
                        }
                    });
                    this.data[column] = id;
                    break;
            }
        },
        //上新年月
        monthChangeBtn(val){
            if(val){
                let arr = val.split("-");
                this.data.year = arr[0];
                this.data.month = parseFloat(arr[1]);
            }else{
                this.data.year = "";
                this.data.month = "";
            }
        },
        //取消按钮 & 重新加载路由
        reloadBtn(isEdit){
            this.isEdit = isEdit;
            this.styleColour = [];
            this.materialData = [];
            this.bomData = [];
            this.bomXHData = [];
            this.yyData = [];
            this.images = "";
            this.imagesList = [];
            this.attachData = [];
            this.sizeData = [];
            this.ruleData = {};
            this.ruleLog = [];
            this.gyData = {};
            this.washData = [];
            this.fileData = [];
            this.logData = [];
            if(/^新增/.test(this.typeNo)){
                this.data = {approval_state: 0, state: 0};
                if(/^新增（复制(.*?)）/.test(this.typeNo)){
                    let match  = /^新增（复制(.*?)）/.exec(this.typeNo);
                    this.copyDetail(match[1]);
                }
            }else{
                this.detail();
                this.detailRule();
                this.detailGy();
                this.detailAttach();
            }
        },
        //查重
        dbCheck(){
            if(!this.data.number){
                this.$message.warning("请填写款号编码!!!");return;
            }
            designDBCheck({type_no: this.data.number}).then((res) => {
                if(res.code === 0){
                    this.$message.success("编码无重复，可正常使用");
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
        //复制
        copyStyleBtn(){
            this.$router.push({
                name: "pages_designEd",
                params: {id: '新增（复制'+this.typeNo+'）', isEdit: 1}
            });
        },
        //新增
        addStyleBtn(){
            this.$router.push({
                name: "pages_designEd",
                params: {id: '新增', isEdit: 1}
            });
        },
        //保存
        saveBtn(){
            if(!this.data.number || !this.data.name || !this.data.short_name || !this.data.product_category || !this.data.detail_category || !this.data.type_id ||
                !this.data.year_month || !this.data.brand || !this.data.season || !this.data.target || !this.data.t1 || !this.data.package_number || !this.data.f3 ||
                !this.data.designer){
                this.$message.warning("必填内容不能为空");return;
            }
            if(this.styleColour.length == 0){
                this.$message.warning("款式颜色不能为空");return;
            }
            let obj = {
                data: JSON.stringify(this.data),
                materiel_data: JSON.stringify(this.materialData),
                style_colour: JSON.stringify(this.styleColour),
                bom_data:JSON.stringify(this.bomData),
                yy_data: JSON.stringify(this.yyData),
                images: JSON.stringify(this.imagesList)
            };
            this.saveLoading = true;
            designSave(obj).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("款式：保存成功");
                    this.reloadRoute();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() => {
                this.saveLoading = false;
            })
        },
        //分割线置顶
        topBtn(bool){
            if(bool){
                this.split = 0;
                this.topShow = false;
                this.tabHeight = (window.innerHeight - 210);
            }else{
                this.split = 0.32;
                this.topShow = true;
                this.tabHeight = (window.innerHeight - 240)*0.68;
            }
        },
        //分割线拖至顶部
        moveBtn(event){
            if(this.split == 0){
                this.topShow = false;
            }else{
                this.topShow = true;
                this.tabHeight = (window.innerHeight - 60) - event.clientY;
            }
        },
        //缩略图--鼠标移入功能
        thumbMouseEnterBtn(index){
            this.selectThumbIndex = index;
            this.images = this.imagesList[index];
        },
        //复制款号
        copyBtn(typeNo){
            copyText(".type-no-tag", typeNo);
            this.$message.success("款号已复制："+typeNo)
        },
        //款号详情--复制
        copyDetail(typeNo){
            this.topLoading = true;
            this.bottomLoading = true;
            designDetail({number: typeNo}).then((res) => {
                this.topLoading = false;
                this.bottomLoading = false;
                this.data = res.data.style;
                delete this.data.id;
                this.$set(this.data, 'number', "");
                this.$set(this.data, 'state', 0);
                this.styleColour = res.data.style_colour;
                this.materialData = [];
                res.data.material_data.forEach(item => {
                    delete item.id;
                    delete item.style_id;
                    delete item.style_bom_size_config.id;
                    Object.keys(item.style_bom_colour_config).forEach(key => {
                        if(!!item.style_bom_colour_config[key][0]){
                            delete item.style_bom_colour_config[key][0]['style_bom_colour_id'];
                        }
                    })
                    this.materialData.push(JSON.parse(JSON.stringify(item)));
                });
                this.images = this.data.img.images ? this.data.img.images : "";
                this.imagesList = this.data.img.images_list ? this.data.img.images_list : [];
                this.getCategoryList();
            }).catch(()=>{
                this.topLoading = false;
                this.bottomLoading = false;
            })
        },
        //款号详情
        detail(){
            this.topLoading = true;
            this.bottomLoading = true;
            designDetail({number: this.typeNo}).then((res) => {
                this.topLoading = false;
                this.bottomLoading = false;
                this.data = res.data.style;
                this.styleColour = JSON.parse(JSON.stringify(res.data.style_colour));
                this.materialData = JSON.parse(JSON.stringify(res.data.material_data));
                this.sizeData = res.data.size_list;
                this.bomData = JSON.parse(JSON.stringify(res.data.bom_data));
                this.bomXHData = res.data.bom_xh_data;
                this.yyData = res.data.yy_gs_data;
                this.washData = res.data.wash_data;
                this.fileData = res.data.file_data;
                this.images = this.data.img.images ? this.data.img.images : "";
                this.imagesList = this.data.img.images_list ? this.data.img.images_list : [];
                if(this.data.approval_state == 4){
                    this.isEdit = 0;
                }
                if(this.isEdit){
                    this.getCategoryList();
                }
            }).catch(()=>{
                this.topLoading = false;
                this.bottomLoading = false;
            })
        },
        //尺寸表信息
        detailRule(){
            designDetailRule({type_no: this.typeNo}).then((res)=>{
                this.ruleData = res.data.data;
                this.ruleLog = res.data.log;
            });
        },
        //工艺单信息
        detailGy(){
            designDetailGy({type_no: this.typeNo, is_edit: this.isEdit}).then((res) => {
                this.gyData = res.data;
            });
        },
        //获取附件信息
        detailAttach(){
            this.bottomLoading = true;
            this.attachData = [];
            designDetailAttach({type_no: this.typeNo}).then((res) => {
                this.bottomLoading = false;
                if(res.code === 0){
                    this.attachData = res.data;
                }
            });
        },
        //获取相关资料信息
        detailFile(){
            this.bottomLoading = true;
            designDetailFile({type_no: this.data.number}).then((res) =>{
                this.bottomLoading = false;
                if(res.code === 0){
                    this.fileData = res.data;
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.bottomLoading = false;
            })
        },
        //导入覆盖
        importData(data){
            let copy = {};
            switch (this.tab){
                case "rule":
                    copy = Object.assign(this.ruleData, {
                        be_careful: data.be_careful,
                        measure_image: data.measure_image,
                        plank_house_table_data: data.plank_house_table_data,
                        plank_house_table_title: data.plank_house_table_title,
                        products_base_cdoe: data.products_base_cdoe,
                        reminder: data.reminder,
                        risk:data.risk ? data.risk :
                            `1.   面料测试劈裂度需合格后方可生产大货.
2.   金属物件做抗氧化处理.
3.   面料互染色牢度测试需合格后方可生产大货.`,
                        sample_clothes_modification_comments: data.sample_clothes_modification_comments,
                        specifications_base_cdoe: data.specifications_base_cdoe,
                        wear_image: data.wear_image
                    });
                    console.log("被覆盖的尺寸表信息", copy)
                    this.ruleData = JSON.parse(JSON.stringify(copy));
                    break;
                case "gy":
                    copy = Object.assign(this.gyData, {
                        detail_drawing: data.detail_drawing,//工艺细节图
                        tearable_label_img: data.tearable_label_img,//可撕图
                        production_sewing_process_requirements: data.production_sewing_process_requirements,//生产缝制工艺要求
                        requirements_for_locking_nails: data.requirements_for_locking_nails,//锁定要求
                        special_process_requirements: data.special_process_requirements, //特色工艺要求
                        packaging_specification_requirements: data.packaging_specification_requirements, //包装规格要求
                        mark_position: data.mark_position, //唛头位置
                        process_instruction: data.process_instruction, //工艺指示书
                        cutting_requirements: data.cutting_requirements,//剪裁要求
                        subsequent_process: data.subsequent_process,//后道工序
                        acceptance_criteria: data.acceptance_criteria,//验收标准
                    });
                    console.log("被覆盖的工艺单", data)
                    this.gyData = JSON.parse(JSON.stringify(copy));
                    break;
            }
        },
        //打印
        printBtn(command){
            this.printData = {
                type: command,
                style: this.data,
                size_list: this.sizeData,
                style_colour: this.styleColour,
            };
            this.printVisible = true;
            console.log("打印",this.printData)
        },
        //纹样描述删除事件
        closeStyleTagBtn(index){
            this.data.style_tag.splice(index, 1);
        },
        showStyleTagInput() {
            this.styleTagVisible = true;
            this.$nextTick(_ => {
                this.$refs.styleTagInput.$refs.input.focus();
            });
        },
        styleTagConfirm(){
            if(!!this.styleTagValue){
                this.data.style_tag.push({style_id: this.data.id, value: this.styleTagValue});
            }
            this.styleTagVisible = false;
            this.styleTagValue = "";
        },
        //停用、启用
        stopBtn(status){
            let msg = status == 0 ? "启用" : "停用";
            this.$confirm(`【${msg}】该设计档案, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.btnLoading = true;
                designStop({id: this.data.id, status:status}).then((res) => {
                    this.btnLoading = false;
                    if(res.code === 0){
                        this.$message.success(`【${msg}】成功`);
                        this.data.approval_state = status;
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {

            })
        },
        //设计、技术、生产确认
        checkBtn(state, msg){
            this.$confirm(`执行【${msg}】, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.state = state;
                this.checkLoading = true;
                designCheck({id: this.data.id, state: state}).then((res) => {
                    this.checkLoading = false;
                    if(res.code === 0){
                        this.$message.success(`【${msg}】成功`);
                        this.data.state = state;
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {

            })
        },

        //打开管理图片
        openImageBtn(){
            if(!this.data.number){
                this.$message.warning("请先输入款号");return;
            }
            this.imageVisible = true;
            this.uploadImages = [];
            this.imagesList.forEach(img => {
                this.uploadImages.push({url: img});
            });
        },
        //关闭管理图片
        closeImageBtn(){
            this.uploadImages = [];
            this.imageVisible = false;
        },
        //保存图片
        saveImageBtn(){
            let images = JSON.parse(JSON.stringify(this.uploadImages));
            this.imagesList = [];
            images.forEach(item => {
                this.imagesList.push(item.url);
            });
            this.images = this.imagesList[0];
            this.closeImageBtn();
        },
        //预览
        previewImgBtn(file){
            this.previewUrl = file.url;
            this.previewVisible = true;
        },
        //删除图片
        delImgBtn(file){
            let index;
            for(let i in this.uploadImages){
                if(this.uploadImages[i].uid == file.uid){
                    index = i;
                    break;
                }
            }
            if(index != undefined){
                this.uploadImages.splice(index, 1);
            }
        },
        //上传之前的检测
        beforeUploadHandle(file) {
            if(!['image/jpg','image/jpeg','image/png'].includes(file.type)){
                this.$message.error('上传图片只能是 jpg、png 格式!');
                return false;
            }
            this.uploadData['name'] = this.data.number;
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res, fileList) {
            if(res.code === 0){
                console.log("图片", res, fileList)
                fileList[fileList.length-1].url = res.data;
                this.uploadImages = fileList;
            }else{
                fileList = fileList.filter(item => item.response && item.response.code === 0 || !item.response);
                this.uploadImages = fileList;
                this.$message.error(res.msg);
            }
        },


        //另存至大货BOM
        pushBomDataHandle(data){
            let list = JSON.parse(JSON.stringify(data));
            let position = this.bomData.length > 0 ? this.bomData[this.bomData.length - 1].position + 1 : 1;
            console.log("另存至大货BOM", data)
            list.forEach(item => {
                item.position = position;
                position += 1;
                this.bomData.push(item);
            });
            this.$message.success("成功复制到大货BOM");
        },
        //远程搜索用户
        searchUserBtn(val){
            if(val == ""){
                return;
            }
            this.searchLoading = true;
            userList({page: 1, limit:20,source_from: 'fs', name: val, status: 1}).then((res) =>{
                this.searchLoading = false;
                this.userList = res.data.data;
            }).catch(() =>{
                this.searchLoading = false;
            })
        },
        //获取商品属性
        getGoodList(){
            goodsList({page: 1, limit: 20}).then((res) =>{
                this.goodsList = res.data.data;
            });
        },
        //获取套装编码
        getSuitList(value){
            this.searchLoading = true;
            let obj = {page: 1, limit: 20};
            if(/^[0-9]+$/.test(value)){
                obj.number = value;
            }else{
                obj.name = value;
            }
            suitList(obj).then((res) =>{
                this.searchLoading = false;
                this.suitList = res.data.data;
            });
        },
        //获取工艺类型
        getArtsList(){
            artsList({page: 1, limit: 20}).then((res) => {
                this.artsList = res.data.data;
            });
        },
        //获取文化属性
        getCultureList(){
            cultureList({page: 1, limit: 20}).then((res) => {
                this.cultureList = res.data.data;
            })
        },
        //获取目标群体
        getTargetList(){
            targetList({page: 1, limit: 20}).then((res) => {
                this.targetList = res.data.data;
            })
        },
        //获取季节
        getSeasonList(){
            seasonList({page: 1, limit: 20}).then((res) => {
                this.seasonList = res.data.data;
            })
        },
        //获取品牌
        getBrandList(){
            brandList({page: 1, limit: 20}).then((res) => {
                this.brandList = res.data.data;
            });
        },
        //获取设计类型
        getTypeList(){
            typeList({page: 1, limit: 20}).then((res) => {
                this.typeList = res.data.data;
            })
        },
        //获取品类
        getClassList(){
            classList({page: 1, limit: 20}).then((res) => {
                this.classList = res.data.data;
            })
        },
        //获取设计分类
        getCategoryList(){
            categoryList({page: 1, limit: 20, tab: this.data.product_category_id}).then((res) => {
                this.categoryList = res.data.data;
            });
        },
        //获取物料属性
        getAttributeList(){
            attribute().then((res) =>{
                res.data.map(item => { this.attributeMap[item.id] = item})
            });
        },
        //获取安全类别、执行标准
        getSafetyData(){
            safetyList({page: 1, limit: 1000, types: [3, 4]}).then((res) => {
                res.data.data.forEach(item => {
                    if(item.types == 3){
                        this.standardData.push(item);
                    }
                    if(item.types == 4){
                        this.safetyData.push(item);
                    }
                });
            }).catch(() => {

            });
        },
        //获取tab栏
        getTab(){
            this.tab = this.nodeActions.includes('d_material') ? "material" : (
                this.nodeActions.includes('d_bom') ? "bom" : (this.nodeActions.includes('d_gy') ? "gy" : "attach")
            );
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        this.getTab();
    },
    mounted () {
        this.getGoodList();
        this.getSuitList("");
        this.getArtsList();
        this.getCultureList();
        this.getTargetList();
        this.getSeasonList();
        this.getBrandList();
        this.getTypeList();
        this.getClassList();
        this.getAttributeList();
        this.getSafetyData();
    }
}
</script>

<style lang="less" scoped>
.split-pane {
    padding: 6px;
    width: 100%;
    height: 100%;
    overflow: auto; /* 允许内容溢出时滚动 */
}
.shuxian-border{
    border-left: 1px solid #c6d1e7;
    display: inline-block;
    height: 20px;
    padding: 4px 0;
    margin: 0px 8px;
    vertical-align: bottom;
}
.thumb-images-box{
    width:40px;
    height:40px;
    margin-right: 2px;
}
.actived{
    border: 1px solid #57a3f3;
}
.select-box /deep/ .el-input__inner{
    background-color: #f5f7fb;
}
.content-box{
    width: 240px;
    height: 38px;
    margin-right: 6px;
    display: flex;
}
.content-box-title{
    color: #2D8cF0;
    font-weight: bold;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;
    width: 80px;
}
.content-box-value{
    width: 160px;
    display: flex;
    align-items: center;
}
.el-tabs__item{font-size: 12px;};

.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}

.button-color{
    color: #303133;
}
.button-color:hover{
    background-color: #c5c8ce;
}

.DesignImage-div-box {
    position: absolute;
    width: 16%;
    z-index: 10;
    background: #57a3f3d9;
    height: 40px;
    display: flex;
    align-items: center;
    color: white;
    padding: 0 8px;
    animation: fadeInDown .5s;
}
.DesignImage-div-box div {
    cursor:pointer;
    display: inline-block;
    height:24px;
    line-height:24px;
    text-align:center;
    margin-right: 4px;
    border-radius: 2px;
}
@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

/*上传模块*/
/deep/ .el-upload-list__item{
    display: inline-flex;
    align-items: center;
}
/deep/ .el-upload-list--picture-card{
    display: inline-flex;
    align-items: center;
}
.el-upload-list__item-thumbnail{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.design-upload /deep/ .el-upload--picture-card{
    border: none;
}
.design-upload /deep/ .el-upload-dragger{
    width: 146px;
    height: 146px;
}
/*上传模块*/
</style>
